<template>
    <div class="px-[30px] py-5 user-info">
      <el-tabs @tab-change="handleChage" v-model="mode">
        <el-tab-pane name="userInfo">
          <template #label>
            <div class="border-b border-br pb-5">
              <span class="text-2xl font-medium">个人信息</span>
            </div>
          </template>
          <div class="mt-5">
            <div class="info-item">
              <div class="item-name">头像</div>
              <div class="avatar">
                <ElAvatar :size="60" :src="userInfo.avatar"></ElAvatar>
                <div class="change-btn">
                  <CropperUpload
                      @change="setUserInfo($event, UserFieldEnum.AVATAR)"
                  >
                    <span class="text-xs text-white">修改</span>
                  </CropperUpload>
                </div>
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">账号</div>
              <div>
                {{ userInfo.account }}
                <ClientOnly>
                  <PopoverInput
                      class="inline-block"
                      @confirm="
                                setUserInfo($event, UserFieldEnum.USERNAME)
                            "
                      :limit="30"
                      show-limit
                  >
                    <ElButton link>
                      <Icon name="el-icon-Edit" :size="16" />
                    </ElButton>
                  </PopoverInput>
                </ClientOnly>
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">昵称</div>
              <div>
                {{ userInfo.nickname }}
                <ClientOnly>
                  <PopoverInput
                      class="inline-block"
                      @confirm="
                                setUserInfo($event, UserFieldEnum.NICKNAME)
                            "
                      :limit="30"
                      show-limit
                  >
                    <ElButton link>
                      <Icon name="el-icon-Edit" :size="16" />
                    </ElButton>
                  </PopoverInput>
                </ClientOnly>
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">性别</div>
              <div>
                    <span>
                        {{ userInfo.sex }}
                    </span>
                <ClientOnly>
                  <PopoverInput
                      class="inline-block"
                      type="select"
                      :teleported="false"
                      :options="[
                                {
                                    label: '男',
                                    value: 1
                                },
                                {
                                    label: '女',
                                    value: 0
                                }
                            ]"
                      @confirm="setUserInfo($event, UserFieldEnum.SEX)"
                  >
                    <ElButton link>
                      <Icon name="el-icon-Edit" :size="16" />
                    </ElButton>
                  </PopoverInput>
                </ClientOnly>
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">邮箱</div>
              <div v-if="userInfo.email">
                {{ userInfo.email }}
              </div>

              <ElButton link type="primary" @click="changeEmail">
                {{ userInfo.email ? '更换邮箱' : '绑定邮箱' }}
              </ElButton>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">联系电话</div>
              <div v-if="userInfo.mobile">
                {{ userInfo.mobile }}
              </div>
              <div v-else>
                请在身份认证填写联系电话<Icon name="el-icon-Warning" />
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">注册时间</div>
              <div>
                {{ userInfo.createTime }}
              </div>
            </div>
          </div>
          <div class="mt-[60px] flex justify-center">
            <ElButton type="primary" @click="handleLogut">退出登录</ElButton>
          </div>

        </el-tab-pane>
        <el-tab-pane name="info">
          <template #label>
            <div class="border-b border-br pb-5">
              <span class="text-2xl font-medium">社团社员</span>
            </div>
          </template>
          <div class="mt-5">
            <div class="info-item leading-10">
              <div class="item-name">学号</div>
              <div>
                {{ info.studentNum }}
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">学院</div>
              <div>
                {{ info.college }}
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">年纪</div>
              <div>
                {{ info.grade }}
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">专业</div>
              <div>
                {{ info.major }}
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="manage">
          <template #label>
            <div class="border-b border-br pb-5">
              <span class="text-2xl font-medium">社团管理员</span>
            </div>
          </template>
          <div class="mt-5">
            <div class="info-item leading-10">
              <div class="item-name">学院名称</div>
              <div>
                {{ mamage.orgName }}
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">社团图标</div>
              <div class="avatar">
                <ElAvatar shape="square" :fit="fit" :size="60" :src="mamage.logo"></ElAvatar>
              </div>
            </div>
            <div class="info-item leading-10">
              <div class="item-name">学院封面</div>
              <div class="avatar">
                <ElAvatar shape="square" :fit="fit" :size="60" :src="mamage.cover"></ElAvatar>
              </div>
            </div>
<!--            <div class="info-item leading-10">-->
<!--              <div class="item-name">认证资料</div>-->
<!--              <div>-->
<!--                {{ mamage.nickname }}-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ElAvatar, ElButton } from 'element-plus'
import { getUserInfo, userEdit } from '@/api/user'
import CropperUpload from '@/components/cropper-upload/index.vue'
import PopoverInput from '@/components/popover-input/index.vue'
import {
    useAccount,
    PopupTypeEnum
} from '@/layouts/components/account/useAccount'
import { logout } from '~~/api/account'
import feedback from '~~/utils/feedback'
import { useUserStore } from '~~/stores/user'
import {getMemberDetail} from "~/api/member";
import {getTeamDetail} from "~/api/team";
const { setPopupType, toggleShowPopup, showPopup } = useAccount()
const userStore = useUserStore()
const router = useRouter()
// 用户资料
enum UserFieldEnum {
    NONE = '',
    AVATAR = 'avatar',
    USERNAME = 'account',
    NICKNAME = 'nickname',
    SEX = 'sex'
}

const { data: userInfo, refresh } = await useAsyncData(() => getUserInfo(), {
    initialCache: false
})
const mode = ref("userInfo")
const setUserInfo = async (
    value: string,
    type: UserFieldEnum
): Promise<void> => {
    await userEdit({
        field: type,
        value: value
    })
    refresh()
}

const handleClick = async (tab: any, event: Event) => {

}
const info = reactive({
  studentNum: "",
  college: "",
  grade: "",
  major: ""
})
const mamage = reactive({
  orgName: "",
  logo: "",
  cover: "",
})

const handleChage = async (name:any) => {
  if(name=='userInfo'){
    refresh();
  }else if(name=='info'){
    getMemberDetail().then(res=>{
      info.studentNum = res.studentNum
      info.college = res.college
      info.grade=res.grade
      info.major=res.major
    })
  }else if(name=="manage"){
    getTeamDetail().then(res=>{
      mamage.orgName = res.orgName
      mamage.logo = res.logo
      mamage.cover=res.cover
    })

  }
}

const changeEmail = () => {
    setPopupType(PopupTypeEnum.BIND_EMAIL)
    toggleShowPopup(true)
}

watch(showPopup, (value) => {
    if (!value) {
        refresh()
    }
})

const handleLogut = async () => {
    await feedback.confirm('确定退出登录吗？')
    await logout()
    userStore.logout()
    router.push({ path: '/'})
}

definePageMeta({
    module: 'personal',
    auth: true
})
</script>
<style lang="scss" scoped>
.user-info {
    .info-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--el-border-color);
        padding: 10px 0;
        .item-name {
            width: 80px;
            color: var(--el-text-color-regular);
        }
    }
    .avatar {
        @apply relative flex cursor-pointer;
        .change-btn {
            display: none;
            height: 50%;
            line-height: 30px;
            @apply absolute bg-[rgba(0,0,0,0.5)]  w-full text-center bottom-0 rounded-b-full;
        }
        &:hover {
            .change-btn {
                display: block;
            }
        }
    }
}
</style>
